import React from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Tabs } from 'antd-mobile';
import '../assets/style/coupon.scss';

export default function Coupon() {
    const navigate = useNavigate();
    return (
        <div className='coupon-container'>
            <NavBar className='page-header' onBack={() => navigate(-1)}>优惠券</NavBar>
            <Tabs>
                <Tabs.Tab key="1" title="未使用">
                    <div className="item">
                        <div className="content">
                            <div className="price">
                                <h2>&yen; <span>3</span></h2>
                                <small className="tips">满3元可用</small>
                            </div>
                            <div>
                                <p>3元新人福利券</p>
                                <small>2021.01.25至2021.01.26</small>
                            </div>
                        </div>
                        <div className="rules">
                            使用规则: 秒杀商品和万人团商品不可使用
                        </div>
                    </div>
                    <div className="item">
                        <div className="content">
                            <div className="price">
                                <h2>&yen; <span>3</span></h2>
                                <small className="tips">满3元可用</small>
                            </div>
                            <div>
                                <p>3元新人福利券</p>
                                <small>2021.01.25至2021.01.26</small>
                            </div>
                        </div>
                        <div className="rules">
                            使用规则: 秒杀商品和万人团商品不可使用
                        </div>
                    </div>
                </Tabs.Tab>
                <Tabs.Tab key="2" title="已使用">
                    <div className="item">
                        <div className="content">
                            <div className="price">
                                <h2>&yen; <span>3</span></h2>
                                <small className="tips">满3元可用</small>
                            </div>
                            <div>
                                <p>3元新人福利券</p>
                                <small>2021.01.25至2021.01.26</small>
                            </div>
                        </div>
                        <div className="rules">
                            使用规则: 秒杀商品和万人团商品不可使用
                        </div>
                    </div>
                </Tabs.Tab>
                <Tabs.Tab key="3" title="已过期">
                <div className="item">
                        <div className="content">
                            <div className="price">
                                <h2>&yen; <span>3</span></h2>
                                <small className="tips">满3元可用</small>
                            </div>
                            <div>
                                <p>3元新人福利券</p>
                                <small>2021.01.25至2021.01.26</small>
                            </div>
                        </div>
                        <div className="rules">
                            使用规则: 秒杀商品和万人团商品不可使用
                        </div>
                    </div>
                    <div className="item">
                        <div className="content">
                            <div className="price">
                                <h2>&yen; <span>3</span></h2>
                                <small className="tips">满3元可用</small>
                            </div>
                            <div>
                                <p>3元新人福利券</p>
                                <small>2021.01.25至2021.01.26</small>
                            </div>
                        </div>
                        <div className="rules">
                            使用规则: 秒杀商品和万人团商品不可使用
                        </div>
                    </div>
                    <div className="item">
                        <div className="content">
                            <div className="price">
                                <h2>&yen; <span>3</span></h2>
                                <small className="tips">满3元可用</small>
                            </div>
                            <div>
                                <p>3元新人福利券</p>
                                <small>2021.01.25至2021.01.26</small>
                            </div>
                        </div>
                        <div className="rules">
                            使用规则: 秒杀商品和万人团商品不可使用
                        </div>
                    </div>
                </Tabs.Tab>
            </Tabs>
        </div>
    )
}
